<template>
  <!-- 个人中心 -->
  <div class="person_page">
    <div class="person banxin">
      <main>
        <!-- 左边部分 -->
        <aside>
          <div class="avatar">
            <img width="100%" :src="userInfo.headImg" alt="" />
          </div>
          <div class="name">
            {{ userInfo.nickName }}<span @click="outLogin">[退出]</span>
          </div>
          <div class="title">
            <img src="../assets/images/person/transaction.png" alt="" />
            交易管理
          </div>
          <ul class="list">
            <li
              @click="$router.push('/personalcenter/centers')"
              :class="{ active: $route.path.includes('centers') }"
            >
              个人中心
            </li>
            <li @click="asideactive = 2" :class="{ active: asideactive === 2 }">
              我的订单
            </li>
            <li
              @click="$router.push('/personalcenter/cart')"
              :class="{ active: $route.path.includes('cart') }"
            >
              购物车
            </li>
            <li @click="asideactive = 4" :class="{ active: asideactive === 4 }">
              消息通知
            </li>
            <li @click="asideactive = 5" :class="{ active: asideactive === 5 }">
              积分明细
            </li>
            <li @click="asideactive = 6" :class="{ active: asideactive === 6 }">
              积分攻略
            </li>
          </ul>
          <div class="title">
            <img src="../assets/images/person/information.png" alt="" />交易管理
          </div>
          <ul class="list">
            <li @click="asideactive = 7" :class="{ active: asideactive === 7 }">
              地址管理
            </li>
            <li @click="asideactive = 8" :class="{ active: asideactive === 8 }">
              账号安全
            </li>
          </ul>
        </aside>
        <!-- 显示左边对应的组件类容 -->
        <article>
          <router-view></router-view>
        </article>
      </main>
    </div>
  </div>
</template>

<script>
import { UserInfoApi } from "@/request/api";
export default {
  data() {
    return {
      userInfo: {},
      asideactive: 1,
    };
  },
  methods: {
    // 点击退出登录
    outLogin() {
      // 删除清空token
      localStorage.removeItem("x-auth-token");
      localStorage.clear();
      // 提示
      this.$store.dispatch("asyncclosetoast", {
        content: "你以退出，即将返回首页",
        icon: "success",
      });
      // 2秒后跳去首页
      setTimeout(() => {
        this.$router.push("/home");
        this.$router.go(0);
      }, 2000);
    },
  },
  created() {
    UserInfoApi().then((res) => {
      console.log(res);
      let { userInfo } = res.data.data;
      this.userInfo = userInfo;
    });
  },
};
</script>
 
<style lang = "less" scoped>
@import "@/assets/base.less";
.person_page {
  background: #fff;
  main {
    border-top: 1px solid #e1e1e1;
    padding: 28px 0 48px;
    display: flex;
    justify-content: space-between;
    background: #fff;
    aside {
      width: 200px;
      height: 740px;
      background: #e7e7e7;
      margin-right: 62px;
      box-sizing: border-box;
      padding: 30px 18px 0;
      .avatar {
        width: 100px;
        height: 100px;
        margin: auto;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-color: pink;
      }
      .name {
        text-align: center;
        margin-top: 19px;
        margin-bottom: 43px;
        span {
          text-decoration: underline;
          color: #2a5df1;
          cursor: pointer;
        }
      }
      .title {
        font-size: 16px;
        color: #333333;
        display: flex;
        align-items: center;
        margin-bottom: 14px;
        img {
          margin-right: 6px;
        }
      }
      .list {
        li {
          margin-bottom: 17px;
          font-weight: 300;
          color: #666666;
          cursor: pointer;
          &.active {
            color: @blue;
            font-weight: bold;
            border-left: 2px solid @blue;
            padding-left: 10px;
          }
        }
      }
    }
    article {
      flex: 1;
      padding: 20px 0 0 20px;
      box-sizing: border-box;
      background: #fff;
    }
  }
}
</style>